マテリアルデザインに魂を売った男の末路 Elevation編
執筆者：中山大悟
執筆年：2018年
※主は英語が得意ではありません。
Elevation
Elevationは、z軸に沿ったサーフェスの距離です。
以下はコンポーネントのElevationの値
1. Nav drawer: 16dp
2. App bar: 4dp
3. Card: 1dpから8dp
4. FAB: 6dp
5. Button: 2dpから8dp
6. Dialog: 24dp
https://material.io/design/assets/1QJydhs6x1YdaiMy5KgClaESCOMjsJss_/elevation-hero.mp4
マテリアルデザインのElevation
Elevationの表し方
マテリアルデザインのElevationは、マテリアルサーフェス間の距離として測定されます。 1つのマテリアルサーフェスの前面から別のマテリアルサーフェスの前面までの距離は、密度に依存しないピクセル（dps）でz軸に沿って測定され、シャドウを使用して（デフォルトでは）示されます
https://material.io/design/assets/0B6xUSjjSulxcOHhpTlc1djc5bEU/elevation-materialdesign.png
1. 正面から見た1dpの高さの1つのサーフェスと8dpの高さの別のサーフェス
2. 側面から見ると両サーフェス間の高低差は7dpであることがわかる。
https://material.io/design/assets/1M4TkRRrjHFL3l8u8EaUu9Do8JR9tUGPr/elevation-materialdesign-2.png
同じ高さのサーフェスは、他のサーフェスがその背後にあるときに、異なる表示をすることができます。
例えば上の画像はサーフェスAとBは同じ8dpの高さにあります。サーフェスBは既にElevationを持っている別の表面（C）の前にあるので、AとBは同じ高さにあっても異なる影を投じる。
Elevation System
マテリアルデザインに置ける全てのサーフェスとコンポーネントにはElevationが存在します。
異なるElevationのサーフェスでは次のことが行われます。
AppBarの背後にあるコンテンツのスクロールなど、サーフェスを他のサーフェスの前後に移動させる。
フローティングアクションボタンの影がカードコレクションとは別のものであることを示すなど、空間関係を反映する。
他のサーフェスの前に一時的に表示されるダイアログなど、最高のElevationに注意を集中させる
表面の塗りつぶしや不透明度などの影や他の視覚的な手がかりを使用してElevationを描くことができます。
ただしこれはあまり推奨される方法ではありません。
https://material.io/design/assets/1fQlLy7BoVIgpDH82CfG-HINC4DYebEzj/measuringelevation-intro-alt-caution01.png https://material.io/design/assets/1sbBGqN7jQatKyCVvvnokWwCuYqFv3miV/measuringelevation-intro-alt-caution02.png
静止時のElevation
表示開始時点でのElevationは、デフォルトでコンポーネントに与えられたElevationで開始されます。コンポーネントは、ユーザーまたはシステムイベントに応答して静止時のElevationから移動します。すべてのマテリアルコンポーネントは、各タイプのコンポーネントで同じElevationを持ちます。例えば、すべてのカードは同じ静止時のElevationを持ち、ダイアログは他のダイアログと同じElevationを持ちます。
静止時のElevationと環境
静止時の標高は、環境、プラットフォーム、またはアプリによって異なります。モバイル上での静止時のElevationは、コンポーネントがインタラクティブであることを示すために影などの視覚的手がかりを提供するように設計されています。対照的に、ホバー状態のような他の手がかりは、コンポーネントがインタラクティブであることを伝えるので、画面上の安静時のElevationは浅くなります。たとえば、デスクトップの0dpの高さにあるカードは、ストロークで輪郭が描かれます。
https://material.io/design/assets/0B6xUSjjSulxcYUhTRTFlcmFKeHc/restingelevation-baselineelevation.png https://material.io/design/assets/0B6xUSjjSulxcUjRuRWFGQlJEdlE/restingelevation-modifiedelevation.png
Elevationの変更
コンポーネントは、ユーザ入力またはシステムイベントに応じてElevationを変更することができます。この場合、コンポーネントは、既定のElevationのコンポーネントが静止していないときに移動する、あらかじめ設定された動的Elevationオフセットに移動します。
動的Elevationオフセットは、各タイプのコンポーネントで同じです。たとえば、すべてのカードは他のカードと同じオフセットを使用し、すべてのフローティングアクションボタンは他のフローティングアクションボタンと同じオフセットを使用します。
ユーザ入力（またはシステムイベント）が完了またはキャンセルされると、コンポーネントは静止時のElevationに迅速に戻ります。
https://material.io/design/assets/1ek59QGBT4tq7ha6RsVG5N9OWbxAjhQlV/responsiveelevation.mp4
Elevationの干渉
コンポーネントが静止Elevationと動的高度オフセットの間を移動するとき、コンポーネントは他のコンポーネントと衝突してはなりません。
これらの種類の衝突を避けるために、コンポーネントは途中で移動できます。たとえば、カードの高さを上げてフローティングアクションボタンを通過すると、そのボタンは、衝突が発生する前に消えたり画面外に移動したりする可能性があります。
アプリのレイアウトを設計して、カードのすぐ上ではなく、カードの横に浮動アクションボタンを配置するなど、衝突を避けることもできます。
https://material.io/design/assets/16Ol9o9nMRVBwdxdLEqpkKPvpqzG6QNtT/avoidelevationinterference-cardpickup.mp4移行中のコンポーネントと衝突する可能性のあるコンポーネントを一時的に再配置または削除します。
カード（A）がピックアップされたときにフローティングアクションボタン（B）が消える例です。
https://material.io/design/assets/1drccSAAC6u3RQxkiqutTPNj-m5nT5ZP1/avoidelevationinterference-cardstreamdesktop.mp4Elevationの干渉が起きる可能性を最小限に抑えるようにアプリケーションを設計します。
Elevationの描写
Elevationを正しく描写するには、サーフェスに次のものが必要です。
1. サーフェスと周囲とのコントラスト
2. 静止時または動作中の他のサーフェスとの重なり
3. 他のサーフェスからの距離
サーフェスのエッジ
エッジとは、境界、端、へり、ふち、尾根、瀬戸際、接線、刃、鋭さ、優位、研ぐ、縁取る、などの意味を持つ英単語。基板やカードなど板状の部品や装置の端の部分のことをエッジということがある。
エッジは、マテリアルサーフェスの触覚品質を表現するのに役立ちます。 UIの異なる部分を識別可能なコンポーネントに分割することで、一方のサーフェスが終了し、もう一方のサーフェスが開始される場所を示します。たとえば、アプリバーの端にグリッドリストとは別のものが表示され、グリッドリストがアプリバーとは独立してスクロールすることをユーザーに伝えます。
デフォルトでは、マテリアルサーフェスはエッジを示すためにシャドウを使用します。他の方法を使用して、エッジを示すことができます。
サーフェスの色を変える
サーフェスに異なる不透明度を与える
エッジは、互いに分離して見えるように、（アクセス可能なコントラスト比を満たすか、または超えて）十分なコントラストを作成する必要があります。
https://material.io/design/assets/1SbWFlHi2cej7BxV-5c0tld3OFM1pgNDI/othertechniques-edges-none.png
エッジを表示しなければに、この画像に1つ以上のサーフェスが含まれているかどうかは見分けることはできないでしょう。
https://material.io/design/assets/1bDvj9QwP439JJyr-aQzaBSUQwq2cFIzF/othertechniques-edges-fill.png
しかしこの画像のように対照的な色でサーフェスを塗れば、2つのサーフェスを有することが明確になります。
サーフェスの重なり
サーフェスが部分的にまたは完全に別のサーフェスと重なっている場合、2つのサーフェスが異なる高さを占めることを示します（サーフェス間の差異の度合いまたは量ではありません）。より高いElevationのサーフェスは、よりElevaionの低いサーフェスの前面に現れます。つまり、サーフェスはZ軸に沿って異なるElevationに位置しています。サーフェスは、デフォルトで互いに重なり合ったり、UIの位置を変更するモーションの結果として重なったりすることがあります。
2つのサーフェスが異なる不透明度または互いにコントラストが不十分な場合は、どちらのサーフェスが前にあるかを知ることが難しくなります。エッジが明確に定義されているため、あいまいに重ねる事は避けてください。
https://material.io/design/assets/0B6xUSjjSulxcSjdvRGphWFNiUWM/surfaceedges-grid-1.png
1. 影は、エッジ、重なり、およびElevationの度合いを示します。
2. 異なる表面色はサーフェスのエッジと重なりを示しますが、Elevation示されません。
3. 不透明度はエッジと重なりを示しますが、Elevationは示していません。
https://material.io/design/assets/0B6xUSjjSulxccEVWQkJYaWpGN0k/occlusion-do-1.png https://material.io/design/assets/0B6xUSjjSulxcbVJtZ1JTLVBDTms/occlusion-dont-1.png
左の画像では一番上のアプリバーがカードの上に重なり、カードの前にあることを示しています。ただし重なりだけでは、サーフェス間のElevationの程度を表せません。
右の画像ではエッジと重なりという視覚的な手がかりがありません、存在するサーフェスの数、サーフェスの上にあるサーフェス、サーフェス間の高さの度合いを判断することができません。
距離(Distance)
サーフェス間の高低差の度合いは、スクラムをかけた背景や影を使用して表現できます。
スクラムの背景
背景がUIでスクラムされると、その上のコンテンツがより高いElevationにあることが表現されます。スクリムの背景は、大きくはあるが不特定のElevationを表現します。
https://material.io/design/assets/0B6xUSjjSulxcdG1hbzdVT2VNdGc/dimmedbackgrounds-do-1.png https://material.io/design/assets/0B6xUSjjSulxcUHNjcEJoMUpiMUU/dimmedbackgrounds-dont-1.png
左の画像ではスクラムされた背景は、サーフェスの重なりを示しますが、Elevationの高さは示されていません。
右の画像では影がないか背景がぼやけているため、ダイアログボックスを背景と区別することが難しくなっています。
影
影は他のテクニックではできない方法でサーフェス間のElevationを表現することができます。
影の大きさと柔らかさまたは拡散量の両方は、2つのサーフェス間の距離の程度を表します。たとえば、シャドウが小さくシャープであるサーフェスは、サーフェスがサーフェスの後ろのサーフェスに近接していることを示します。より大きく、より柔らかい影は、より多くの距離を表現します。
影の大きさと拡散の微妙な違いが以下に作用します。
2つのサーフェス間の詳細な距離
重なっていないサーフェス間のElevationの差
https://material.io/design/assets/0B6xUSjjSulxcUHNiR2xVTUlwVHc/expressingelevation-1.png
影は、サーフェスのエッジと、そのサーフェスのElevationを背景に対して表示します。それらはまた、重なり合わないサーフェスの間で知覚可能なサーフェスのElevationの差を生じさせる。
https://material.io/design/assets/0B6xUSjjSulxcMU5NeGFYV3Z6NVk/separation-shadow-do-1.png https://material.io/design/assets/0B6xUSjjSulxcS0hVbnBlYzJKZTA/separation-shadow-dont-1.png
左の画像では影によってサーフェスのElevationを知覚可能にしています。アプリケーションバー（1）の小さくシャープな影は、より大きくて柔らかい影を持つメニュー（2）よりも低いElevationにあることを示しています。
右の画像ではエッジやサーフェスの重なりを示す影や他の視覚的な手がかりがないため、サーフェス間のコントラストが不十分になります。その結果、このUIのどの部分がグループ化されているのかを理解することが困難になっています。
https://material.io/design/assets/0B6xUSjjSulxcR005WjVoeHhpMjA/shadows-dont-1.png
ただし上の画像のようにスタイルにのみ影を使用しないでください。
MotionとElevation
Motionでは、以下の方法を使用してElevationを強調できます。
影の変化
オーバーラップの表示
プッシュ
スケーリング
視差
影の変化
影の大きさや柔らかさの変化はElevationの変化を強調します。
https://material.io/design/assets/1fSTUqPrUZQEf92foXxUqKRzeZagqssSp/tapcard.mp4カードが上がっていることを強調するために影が広がります。
オーバーラップの表示
サーフェスは、部分的にまたは完全にアニメーションの際に別のサーフェスが重なり、どちらのサーフェスが前にあるかを示します。
https://material.io/design/assets/1bcMvupdgGNQiNuoQcA17e5iQrGg6VxND/tapcard-overlap.mp4拡大すると、サーフェスは近くのサーフェスをオーバーラップさせてElevationを表示することがあります。
プッシュ
同じElevationを共有するサーフェスは、そのパス内のサーフェスを移動できます。
https://material.io/design/assets/1uS4UF7tYRtSEoOJXnje_jVgsfAtM8YF1/tapcard-push.mp4選択されたリスト項目が展開され、周囲の項目を遠ざけます。
スケーリング
サーフェスのサイズを拡大または縮小すると、Elevationの変更が強調されます。
https://material.io/design/assets/1_CJVk2VXhayQrWqb8xpvfR5uea3nzeL3/scaling.mp4最前面と背景のサーフェスは、Elevationの変化を強調するために上下にスケールされます。
視差
異なるElevationで複数のサーフェスが異なる速度で移動すると、深いイメージが形成され、最前面のコンテンツにフォーカスが置かれます。
https://material.io/design/assets/14x0icb1zn1n_MBHSY6UxxcVtKDi289go/shrine-parallax.mp4前景の表面は背景のイメージよりも速く動いて、深いイメージを作り出します。
モーション技術の組み合わせ
Elevationは、モーション技術の組み合わせによって強調することができます。
https://material.io/design/assets/1T8wiO_e8hQviQUBHSfvsmsZ02WgWXE8r/basil-parallax.mp4視差のモーションとスケーリングは、どのサーフェスが他のサーフェスの前にあるかを強調します。
Elevaionのヒエラルキー
コンテンツは、類似しているか異なるElevationにあるかに応じて、他のコンテンツに関連します。
異なるElevationのコンテンツ
他のサーフェスよりも前面のサーフェス
1. より重要なコンテンツを含む
2. ダイアログなどへの注目を集める
3. アプリケーションバーのアクションなど、その背後にあるサーフェスを制御する
https://material.io/design/assets/0B6xUSjjSulxcZGU1OFR4TnktVVk/abovesurface-footnote-1.png
デスクトップアプリ画面上のフロント（1）とサイド（2）ビューは、プライマリフォーカス（B）の重要なコンテンツが、脚注（A）のようにセカンダリフォーカスのコンテンツの前に表示される方法を示します。
https://material.io/design/assets/0B6xUSjjSulxcQ1gxT0VRMHQ2bU0/abovesurface-bottomsheet-1.png
モバイルアプリ画面上の正面（1）と側面（2）のビューは、下部シート（A）のように、より高いサーフェスにコンテンツを配置することによって、コンテンツを維持しながら注意を集中させる方法を示しています。
https://material.io/design/assets/1qyQNgT3tHX6M-o1N4AQ-iHh2HH8_F6gV/surfacerelationships-drawer.mp4モバイルアプリの前面（1）および側面（2）は、サーフェス（A）のコンテンツが通常、ナビゲーションドロワー（B）などの前面のサーフェスによってどのように制御されるかを示します。
同一サーフェス上のコンテンツ
同じElevationにサーフェスを配置すると、サーフェスが同一のサーフェスになり、互いに重要な内容が含まれている可能性があります。 たとえば、コレクション内のすべてのカードの重要度は同じです。
https://material.io/design/assets/1gIKUSfyMaUtTcfcPweifzTJm6bZDXTfA/surfacerelationships-sameelevation.mp4正面から見たカード（A、B）は同じElevationを持ち、一緒に動いて内容が類似していることを補強します
Elevationを表さないサーフェスは同一平面上に表示されます。 Elevationを表さないサーフェスは、コンテンツの階層的な違いを伝えることができ、相対的な階層レベルを示唆するように水平と垂直のレイアウト位置を調整することができます。
たとえば、サーフェスが同一平面上にあるダッシュボードでは、言語のテキストが表示される方向に基づいて、親コンテンツの隣に詳細コンテンツが配置されます。
https://material.io/design/assets/0B6xUSjjSulxcOHh1NEc4c3hUZlU/coplanar-hierarchy-1.png
正面から見た画面上のUIは、同じElevation（A、B、C）での左から右へのサーフェスの配置が英語のコンテンツに基づいて階層をどのように伝達するかを示しています。
Default Elevation
すべての要素には、静止Elevationと動的Elevationオフセットのデフォルト値があります。 特定のコンポーネントは、他のコンポーネントよりも高いElevationに配置され、すべてのコンポーネントにわたって一貫した昇順を確立します。 たとえば、ダイアログは常に他のすべてのコンポーネントの前に表示されます。
次の表に、静止Elevationと動的Elevationオフセットのデフォルト値を示します。
デフォルトのElevation値の表
table:Default Elevation
Component Default elevation values (dp)
Dialog 24
Modal bottom sheet, Modal side sheet 16
Navigation drawer 16
Floating action button (FAB - pressed) 12
Standard bottom sheet, Standard side sheet 8
Bottom navigation bar 8
Bottom app bar 8
Menus and sub menus 8
Card (when picked up) 8
Contained button (pressed state) 8
Floating action button (FAB - resting elevation), Snackbar 6
Top app bar (scrolled state) 4
Top app bar (resting elevation) 0 or 4
Refresh indicator, Search bar (scrolled state) 3
Contained button (resting elevation) 2
Search bar (resting elevation) 1
Card (resting elevation) 1
Switch 1
Text button 0
Standard side sheet 0
デフォルトのElevation値の図
https://material.io/design/assets/0B6xUSjjSulxceF9udnA4Sk5tdU0/baselineelevation-chart.png
複数のコンポーネントの静止Elevationと動的Elevationオフセットを示す断面図。
Elevationのガイドラインは以上です。
Elevationを表すなら影を使うのがやはり良いようですね。
重要なコンテンツほどElevationが高くなるというのは覚えておいたほうが良さそうです。
次回は「光と影」のガイドラインについてです。厨二病じゃ（ry